<template>
    <van-sticky z-index="100">
        <van-nav-bar
            title="我的订单"
            left-text="返回"
            left-arrow
            @click-left="onBack"
        />

        <van-tabs v-model:active="active" @click-tab="onClickTab">
            <van-tab
                v-for="(item, index) in statusList"
                :key="index"
                :title="item.text"
                :name="item.name"
            >
            </van-tab>
        </van-tabs>
    </van-sticky>

    <div class="list-box">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
                v-model:loading="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
            >
                <div class="list">
                    <!-- 一个item代表一个订单 -->
                    <div class="item" v-for="item in list" :key="item.id">
                        <div class="header">
                            <div class="left">
                                订单号：<span>{{ item.code }}</span>
                            </div>
                            <div class="right">{{ item.status_text }}，总金额：{{ item.amount }}</div>
                        </div>
                        <div class="content">
                            <van-card
                                v-for="son in item.order_product"
                                :key="son.id"
                                :num="son.pronum"
                                :price="son.total"
                                :title="son.products.name"
                                :thumb="son.products.thumb_cdn"
                            >
                                <template #desc>
                                    <span>商品单价：￥{{ son.price }}</span>
                                </template>
                            </van-card>
                        </div>
                        <div class="footer">
                            <div class="date">{{ item.createtime_text }}</div>
                            <div class="btn">
                                <van-button
                                    size="mini"
                                    type="primary"
                                    @click="toInfoPage(item.id,item.businessaddrid)"
                                >
                                    订单详情
                                </van-button>

                                <van-button
                                    v-if="item.status == 0"
                                    size="mini"
                                    type="success"
                                    @click="onPay(item.id,item.amount)"
                                >
                                    确认支付
                                </van-button>

                                <van-button
                                    v-if="item.status == 3"
                                    size="mini"
                                    type="success"
                                    @click="onRate(item.id)"
                                >
                                    评价
                                </van-button>

                                <van-button
                                    v-if="item.expresscode"
                                    size="mini"
                                    type="warning"
                                    @click="toExpressPage(item.id)"
                                >
                                    物流信息
                                </van-button>

                                <van-button
                                    size="mini"
                                    v-if="item.status == 2"
                                    type="success"
                                    @click="Confirmreceipt(item.id)"
                                >
                                    确认收货
                                </van-button>
                                <van-button
                                    size="mini"
                                    v-if="item.status == 4"
                                    type="success"
                                    @click="toEvaluationPage(item.id)"
                                >
                                    评价详情
                                </van-button>

                                <van-button
                                    size="mini"
                                    v-if="item.status > 0 && item.status != 4"
                                    type="danger"
                                    @click="rejected(item.id)"
                                >
                                    申请退货
                                </van-button>

                                <van-button
                                    size="mini"
                                    v-if="
                                        item.status == '-3' &&
                                        item.depot_status == false
                                    "
                                    type="danger"
                                    @click="refundgoods(item.id)"
                                >
                                    待退货
                                </van-button>

                                <van-button
                                    size="mini"
                                    v-if="item.status < 0"
                                    type="danger"
                                    @click="refundinfo(item.id)"
                                >
                                    退货详情
                                </van-button>
                            </div>
                        </div>
                    </div>
                </div>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, reactive } from "vue";

const { proxy } = getCurrentInstance();
const active = ref("");
const statusList = reactive([
    {
        text: "全部",
        name: "",
    },
    {
        text: "待付款",
        name: 0,
    },
    {
        text: "待发货",
        name: 1,
    },
    {
        text: "待收货",
        name: 2,
    },
    {
        text: "待评价",
        name: 3,
    },
    {
        text: "已完成",
        name: 4,
    },
    {
        text: "售后",
        name: -1,
    },
]);
const business = reactive(
    proxy.$cookies.get("business") ? proxy.$cookies.get("business") : {}
);
const refreshing = ref(false);
const loading = ref(false);
const finished = ref(false);
const list = ref([]);
const page = ref(1);
const limit = ref(10);
const listCount = ref(0);

// 下拉刷新
const onRefresh = () => {
    list.value = [];
    page.value = 1;
    refreshing.value = true;
    loading.value = true;

    onLoad();
};

// 上拉加载
const onLoad = () => {
    if (!refreshing.value && list.value.length < listCount.value) {
        page.value = page.value + 1;
    }

    if (refreshing.value) {
        setTimeout(() => (refreshing.value = false), 1500);
    }

    setTimeout(getOrderData, 1500);
};

// 请求
const getOrderData = async () => {
    let data = {
        busid: business.id,
        page: page.value,
        limit: limit.value,
        status: active.value,
    };

    let result = await proxy.$api.OrderIndex(data);

    if(result.code === 0)
    {
        proxy.$showNotify({
            type:'warning',
            message:result.msg,
            duration:1500,
            onClose:() => {
                finished.value = true;
            }
        });

        return;
    }

    finished.value = false;
    loading.value = false;

    let Data = result.data;

    list.value = list.value.concat(Data.list);
    listCount.value = Data.count;

    if(list.value.length == listCount.value)
    {
        finished.value = true;
        return;
    }
};

const onClickTab = () => {
    onRefresh();
};

const onPay = (id,amount) => {
    proxy.$showConfirmDialog({
        title:'支付',
        message:'是否确认支付？'
    }).then(async (res) => {
        console.log(business.money);
        let data = {
            busid:business.id,
            id:id,
            money:business.money-amount
        }

        let result = await proxy.$api.OrderPay(data);

        if(result.code === 1)
        {
            proxy.$showNotify({
                type:'success',
                message:result.msg,
                duration:1500,
                onClose:() => {
                    onRefresh();
                }
            });

            return;
        }else{
            proxy.$showNotify({
                type:'warning',
                message:result.msg,
                duration:1500
            });

            return;
        }
    }).catch((err) => {
        console.log('取消操作')
    });
}

const toInfoPage = (id,businessaddrid) =>{
    proxy.$router.push({path:'/product/order/detail',query:{'id':id,'businessaddrid':businessaddrid}});
    return;
}

// const toEvaluationPage = (id) => {
//     proxy.$router.push({path:'/product/product/info',query:{proid:}});
//     return;
// }

const onRate = (id) => {
    proxy.$router.push({path:'/product/product/comment',query:{'id':id}});
    return;
}

const onBack = () => {
    proxy.$router.back();
};
</script>

<style>
.list-box{
    background: #ccc;
}

.list-box .header {
    display: flex;
    justify-content: space-between;
    /* padding: 0 10px; */
}

.list .item .left span {
    font-size: 14px;
    font-weight: bold;
}

.item {
    padding: 5px 5px 3px;
    background: #fff;
    margin-bottom: 5px;
}

.item .header .left {
    font-size: 13px;
}

.item .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.item .footer .date {
    font-weight: bold;
}
</style>
